<script setup lang="ts">
withDefaults(
  defineProps<{
    type?: 'row' | 'col';
    margin?: string;
    directionMargin?: string;
  }>(),
  {
    type: 'row',
    directionMargin: '20px',
  },
);
</script>

<template>
  <div v-if="type === 'row'" class="divider-row" :style="{ marginTop: directionMargin, marginBottom: directionMargin, margin: margin }"></div>
  <div v-else class="divider-col" :style="{ marginLeft: directionMargin, marginRight: directionMargin, margin: margin }"></div>
</template>

<style scoped>
.divider-row {
  width: 100%;
  border-top: 1px solid var(--el-border-color);
}
.divider-col {
  height: 100%;
  border-left: 1px solid var(--el-border-color);
}
</style>
